<template>
  <div class="login-page">
      <div class="login-head">
            <i class="login-back" @click="back"></i>
            <div class="login-bg">
            <img class="login-logo" src="~images/logo/logo.png" alt="">
            <p class="login-desc">领先的彩票平台！</p>
            <i class="login-ball login-b1"></i>
            <i class="login-ball login-b2"></i>
            <i class="login-ball login-b3"></i>
            </div>
            <div class="login-btn-wrap">
                <div :class="islogin?'login-btn-active':'login-btn'" @click="islogin=true;">登录</div>
                <div :class="islogin?'login-btn':'login-btn-active'" @click="islogin=false;">注册</div>
            </div>
        </div>
      <div class="login-form">
          <div class="login-form-box">
              <div class="login-form-item">
                  <img class="login-form-icon" src="~images/icon/username.png" alt="">
                  <input type="text" v-model="user.username" class="login-form-input" :placeholder="islogin?'请输入手机号/账号名':'用户名'" />
                  <span class="login-form-required" v-if="!islogin">*</span>
              </div>
              <div class="login-form-item" v-if="!islogin">
                  <img class="login-form-icon" src="~images/icon/phone.png" alt="">
                  <input type="text" v-model="user.phoneNumber" class="login-form-input" placeholder="手机号码" />
                  <span class="login-form-required" v-if="!islogin">*</span>
              </div>
              <div class="login-form-item">
                  <img class="login-form-icon" src="~images/icon/password.png" alt="">
                  <input type="text" v-model="user.password" class="login-form-input" :placeholder="islogin?'请输入密码':'登录密码：6-12位英文+数字'" />
                  <img class="login-form-icon" :src="eyeIcon" alt="" @click="iswordOpen = !iswordOpen">
                  <span class="login-form-required" v-if="!islogin">*</span>
              </div>
              <div class="login-form-item" v-if="!islogin">
                  <img class="login-form-icon" src="~images/icon/hand.png" alt="">
                  <input type="text" v-model="user.inviteCode" class="login-form-input" disabled/>
                  <span class="login-form-required" v-if="!islogin">*</span>
              </div>
              <div class="login-form-item">
                  <img class="login-form-icon" src="~images/icon/123.png" alt="">
                  <input type="text" v-model="user.identify" class="login-form-input" placeholder="请输入图片验证码" />
                  <img class="login-form-icon" src="" alt="">
                  <span class="login-form-required" v-if="!islogin">*</span>
              </div>
              <div class="login-form-item" v-if="!islogin">
                  <img class="login-form-icon" src="~images/icon/wechat.png" alt="">
                  <input type="text" v-model="user.wechat" class="login-form-input" placeholder="微信号"/>
                  <span class="login-form-required" v-if="!islogin">*</span>
              </div>
              <div class="login-form-item" v-if="!islogin">
                  <img class="login-form-icon" src="~images/icon/qq.png" alt="">
                  <input type="text" v-model="user.qq" class="login-form-input" placeholder="QQ号码"/>
                  <span class="login-form-required" v-if="!islogin">*</span>
              </div>
              <div class="login-form-item" v-if="!islogin">
                  <img class="login-form-icon" src="~images/icon/idcard.png" alt="">
                  <input type="text" v-model="user.idcard" class="login-form-input" placeholder="真实姓名"/>
                  <span class="login-form-required" v-if="!islogin">*</span>
              </div>
              <div class="login-form-forget" v-if="islogin">
                  <a href="#/login/forget">忘记密码？</a>
              </div>
              <div class="agreement-item" v-if="!islogin">
                  <img src="" alt="" class="agreement_icon">我同意
                  <a href="" class="agreement_link">《金盛彩票开户协议》</a>
              </div>
              <div class="login-form-in" @click="submit">{{islogin?'登录':'注册'}}</div>
          </div>
      </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'downLoad',
  data () {
    return {
      iswordOpen: false,
      user: {
        username: null,
        password: null,
        identify: null,
        inviteCode: '11117',
        wechat: null,
        qq: null,
        idcard: null
      },
      islogin: true
    }
  },
  computed: {
    eyeIcon () {
      return this.iswordOpen ? require('../../assets/images/icon/open_eye.png') : require('../../assets/images/icon/close_eye.png')
    }
  },
  methods: {
    ...mapMutations({
      'setUsernamex': 'setUsernamex'
    }),
    submit () {
      // 登录逻辑
      if (this.islogin) {
        if (!this.user.identify) {
          this.$toast({
            message: '请输入验证码',
            duration: 2000
          })
          return true
        }
        if (!this.user.username || !this.user.password) {
          this.$toast({
            type: 'fail',
            message: '用户名或密码不能为空',
            duration: 2000
          })
          return true
        }
        this.$toast({
          type: 'success',
          message: '登录成功',
          duration: 2000
        })
        this.setUsernamex(this.user.username)
        this.$router.push({ name: 'personal' })
      }
    },
    back () {
      this.$router.push({ name: 'personal' })
    }
  },
  created () {}
}
</script>
<style lang="less" rel="stylesheet/less" scoped>
.login-page {
    height: 100%;
    overflow-y: scroll;
    background-color: #fff;
}
.login-head {
    position: relative;
    background: -webkit-linear-gradient(120deg,#ff78d2,#9067ff);
}
.login-back {
    width: 20px;
    height: 20px;
    display: block;
    position: fixed;
    top: 40px;
    right: 32px;
    background: url('~images/icon/chacha.png') no-repeat;
    background-position: 50%;
    background-size: contain;
}
.login-bg {
    height: 138px;
    overflow: hidden;
}
.login-logo {
    width: 68px;
    height: auto;
    display: block;
    margin: 32px auto 8px;
    background-position: 50%;
    background-size: contain;
    border-radius: 20%;
}
.login-desc {
    font-size: 15px;
    color: #fff;
    text-align: center;
    line-height: 22px;
    letter-spacing: 3px;
}
.login-b1, .login-b2 {
    background-position: 50%;
    background-size: contain;
}
.login-b1 {
    width: 27px;
    height: 27px;
    top: 136px;
    left: 63px;
}
.login-ball {
    display: block;
    position: absolute;
}
.login-b2 {
    width: 37.3px;
    height: 37.3px;
    top: 209px;
    left: 84.2px;
}
.login-b3 {
    width: 35px;
    height: 35px;
    top: 188px;
    left: 162px;
    background-position: 50%;
    background-size: contain;
}
.login-btn-wrap {
    height: 40px;
    font-size: 15px;
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 2px;
    position: relative;
}
.login-btn-wrap .login-btn-active {
    color: #661dac;
    color: #fdfdfd;
}
.login-btn-wrap .login-btn, .login-btn-wrap .login-btn-active {
    z-index: 1;
    margin-top: 8px;
    -ms-flex: 1 1;
    flex: 1 1;
    text-align: center;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}
.login-btn-wrap .login-btn, .login-btn-wrap .login-btn-active {
    z-index: 1;
    margin-top: 8px;
    -ms-flex: 1 1;
    flex: 1 1;
    text-align: center;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}
.login-btn-wrap .login-btn {
    color: #661dac;
}
.login-form {
    background-color: #fff;
}
.login-form-box {
    padding: 0 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.login-form-box .login-form-item {
    height: 52px;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    border: 0;
    border-bottom: 1px solid #ff78d2;
    -webkit-border-image: -webkit-gradient(linear,left top,right top,from(#895dff),to(#f064c1)) 1 1;
    -webkit-border-image: -webkit-linear-gradient(left,#895dff,#f064c1) 1 1;
    -o-border-image: -o-linear-gradient(left,#895dff,#f064c1) 1 1;
    border-image: -webkit-gradient(linear,left top,right top,from(#895dff),to(#f064c1)) 1 1;
    border-image: linear-gradient(90deg,#895dff,#f064c1) 1 1;
}
.login-form-box .login-form-item .login-form-icon {
    width: 20px;
    margin-right: 16px;
}
.login-form-box .login-form-item .login-form-input {
    -ms-flex: 1 1;
    flex: 1 1;
    width: 120px;
    height: 100%;
    font-size: 15px;
    color: #000;
}
.login-form-forget {
    display: block;
    margin-top: 8px;
    width: 100%;
    color: #434343;
    font-size: 14px;
    height: 40px;
    text-align: right;
}
.login-form-free, .login-form-in, .login-form-up {
    display: block;
    text-align: center;
    font-size: 16px;
}
.login-form-in, .login-form-up {
    width: 160px;
    height: 47px;
    background: -webkit-linear-gradient(120deg,#ff78d2,#9067ff);
    border-radius: 107px;
    line-height: 47px;
    color: #fff;
    margin: 22px auto;
}
.agreement-item {
    display: -ms-flexbox;
    display: flex;
    font-size:12px;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 8px;
    color: #666;
    vertical-align: top;
}
.agreement-item .agreement_icon {
    height: 16px;
    margin-right: 8px;
    margin-top: -1px;
}
.agreement-item .agreement_link {
    white-space: nowrap;
    color: #8454e4;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}
.login-form-box .login-form-item .login-form-required {
    position: absolute;
    width: 16px;
    font-size: 20px;
    right: -16px;
    top: 0;
    bottom: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: red;
}
</style>
